<template>
  <div class="aside">
    <el-menu
     background-color="#00BFFF"
      text-color="#fff"
    >
      <el-submenu class="nav-title" index="1" v-for="item in navlist" :key="item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{item.authName}}</span>
        </template>
        <el-menu-item  v-for="child in item.children" :key="child.id" @click="$router.push({ path: child.path, query: { name: child.authName }})">{{child.authName}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div> 
 <!-- <div class="aside">
    <el-menu
      background-color="#00BFFF"
      text-color="#fff"
      unique-opened
    >
      <el-submenu class="nav-title" :index="item.id | toString" v-for="item in  navlist" :key="item.id" unique-opened>
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{item.authName}}</span>
        </template>
        <el-menu-item  v-for="child in item.children"  :key="child.id" @click="$router.push({ path: child.path, query: { name: child.authName}})">{{child.authName}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div> -->
</template>

<script>
import {mapState} from 'vuex'
import common from '@/common/mixins/common.js'
export default {
  mixins: [common],
  data () {
    return {
      navlist: []
    }
  },
  mounted () {
    this.navlist = this.user.rights
  },
  computed: {
   ...mapState(['user'])
  }
}
</script>

<style lang="less" scoped>
.aside{
	position: relative;
	bottom:0;
	left:0;
	width:100%;
	height:800px !important;
	background-color: #00BFFF;
}

.nav-title {
  & /deep/ i {
    color: #fff;
  }
  .el-menu-item {
    color: #fff;
  }
}
</style>
